'use strict';

var m_apis = {
    getData: function getData() {
        return 'static/js/diy/demoData.json';
    }
};
var vu = new Vue({
    el: '#app',
    data: {
        apis: m_apis,
        areaArr: g_areaData,
        firstData: null,
        lastData: null,
        dateArr: [],
        allData: [],
        tableColDefaultWidth: 65, // 太大A2纸张打印不下，可以用PDF Creater模拟A2大小打印
        tableHeight: 600,
        tableWidth: window.innerWidth,
        isInPrintType: false,
        dtData: [],
        dtCols: []
    },
    created: function created() {
        if (!window.localStorage) {
            alert('请使用QQ浏览器(极速模式),360浏览器(极速模式),chrome,火狐等现代浏览器打开');
            return;
        }
        this.loadData();
    },

    methods: {
        loadData: function loadData() {
            var _this = this;

            // ajax读取后端数据
            PB.showLoading();
            var loadAllData = new Promise(function (resolve, reject) {
                $.getJSON(_this.apis.getData()).then(function (data) {
                    _this.allData = data;
                    resolve();
                }).catch(function (err) {
                    PB.hideLoading();
                    reject();
                });
            });

            Promise.all([loadAllData]).then(function (d) {
                PB.hideLoading();
                _this.init();
            });
        },
        init: function init() {
            this.fmtData();
            this.initData();
            this.updatePosition();

            // jquery的操作得延迟一下，让vuejs先渲染界面
            this.$nextTick(function () {
                var _this2 = this;

                setTimeout(function () {
                    DiyDraw.draw(_this2.allData, _this2.areaArr, _this2.dateArr);
                    _this2.setHeaderColor();
                    $('.d-img').show();

                    $(document).on('mouseenter', '.diy-chart', function (e) {
                        if (!_this2.isInPrintType) {
                            var $dom = $(e.currentTarget);
                            var str = '工程：' + $dom.attr('data-cn') + '；<br/>起始时间：' + $dom.attr('data-begin-date') + '；\n                                结束时间：' + $dom.attr('data-end-date');
                            _this2.showTip(str);
                        }
                    }).on('mouseleave', '.diy-chart', function (e) {
                        _this2.hideTip();
                    });
                }, 2000);
            });
        },
        fmtData: function fmtData() {
            var arrDate = [];
            // 最关键是格式化日期
            this.allData.forEach(function (q) {
                q.data.forEach(function (o) {
                    o.beginDate = new Date(o.beginDate);
                    o.endDate = new Date(o.endDate);

                    // 既然都循环了，顺便计算出日期范围
                    arrDate.push(o.beginDate);
                    arrDate.push(o.endDate);
                });
            });

            this.firstData = new Date(Math.min.apply(Math, arrDate));
            this.lastData = new Date(Math.max.apply(Math, arrDate));
        },
        initData: function initData() {
            //PB.setStorage('allData', this.allData, 10);


            var rowsArr = [],
                tempDate = this.lastData;
            while (tempDate >= this.firstData || tempDate.getMonth() >= this.firstData.getMonth()) {
                rowsArr.push(tempDate.pattern('yyyy年MM月'));
                tempDate.setMonth(tempDate.getMonth() - 1);
            }
            this.dateArr = rowsArr;

            this.initDt();
        },
        initDt: function initDt() {
            var _this3 = this;

            this.areaArr.forEach(function (q) {
                var obj = {};
                obj.title = q.name;
                obj.align = 'center';
                obj.width = q.width ? q.width : _this3.tableColDefaultWidth;
                if (q.key) {
                    obj.key = q.key;
                }
                if (q.fixed) {
                    obj.fixed = q.fixed;
                }

                _this3.dtCols.push(obj);
            });

            this.dateArr.forEach(function (q) {
                _this3.dtData.push({
                    createTime: q
                });
                // this.areaArr.forEach(o=>{
                //     this.dtData.push({
                //
                //     });
                // });
            });
        },
        setHeaderColor: function setHeaderColor() {
            this.areaArr.forEach(function (q) {
                var $col = void 0;
                if (q.fixed) {
                    $col = $('div.ivu-table-fixed-header span:contains("' + q.name + '")');
                } else {
                    $col = $('div.ivu-table-header span:contains("' + q.name + '")');
                }

                if ($col.length > 0) {
                    $col = $col.parent().parent(); // 获得该span所在的th
                    $col.css('background-color', q.color);
                }
            });
        },
        updatePosition: function updatePosition() {
            // 目的是让图案之间不要被覆盖或者重叠太严重

            this.allData.forEach(function (q) {
                var sortlData = q.data.sort(function (o, t) {
                    return o.beginDate - t.beginDate;
                });
                var i = 0;
                sortlData.filter(function (o) {
                    return DiyImg[o.type].type === 'rect';
                }).forEach(function (o) {
                    if (DiyImg[o.type].zIndex) {
                        // 如果图案自己定义了zindex，则以图案的为准
                        o.zIndex = DiyImg[o.type].zIndex;
                    } else {
                        o.zIndex = 5 - DiyImg[o.type].size; // size越大的，zindex越小
                    }

                    // 每一列分为3个队列，分开放置图案
                    switch (i % 3) {
                        case 0:
                            break;
                        case 1:
                            o.addLeft = 10;
                            break;
                        case 2:
                            o.addRight = 10;
                            break;
                    }
                    ++i;
                });

                // 图案一律置顶
                sortlData.filter(function (o) {
                    return DiyImg[o.type].type === 'image';
                }).forEach(function (o) {
                    o.zIndex = 10;
                });

                // 色块一律置底
                sortlData.filter(function (o) {
                    return DiyImg[o.type].type === 'banner';
                }).forEach(function (o) {
                    o.zIndex = 1;
                });
            });
        },
        changeTypeToPrint: function changeTypeToPrint() {
            var _this4 = this;

            if (this.isInPrintType) {
                this.tableHeight = 600;
                this.tableWidth = window.innerWidth;
                $('#imgWindow').height(this.tableHeight - 75).width(this.tableWidth - 10); // 别问我点解要-75
                this.$nextTick(function () {
                    setTimeout(function () {
                        $('.d-img').show();
                    }, 2000);
                });
            } else {
                this.tableHeight = this.dateArr.length * 30 + 60; // 头部高度
                var sumWidth = 0;
                this.areaArr.forEach(function (q) {
                    sumWidth += q.width ? q.width : _this4.tableColDefaultWidth;
                });
                this.tableWidth = sumWidth + 20;
                $('#imgWindow').height(this.tableHeight - 75).width(this.tableWidth - 10);
            }

            this.isInPrintType = !this.isInPrintType;
        },
        print: function print() {
            window.print();
        },
        openFuBiao: function openFuBiao() {
            window.open('fubiao.html');
        },
        showTip: function showTip(str) {
            $('.d-tip').html(str).show();
        },
        hideTip: function hideTip() {
            $('.d-tip').hide();
        }
    }
});